<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" size="small">
          <ad-datetime-range v-model="searchQuery" @select="search" @search="search"/>
        </el-form>
      </div>
      <div class="op">
        <el-button  type="primary" size="mini" @click="exportExcel()">导出</el-button>
      </div>
    </div>
    <div class="box-style" id="lineImg">
      <div class="top">
        <ad-table :data="waitList" u-table @sort-change="waitSortInitList"
                  :data-changes-scroll-top="waitIsScrollTop" :show-summary="waitSummary"
                  v-loading="waitInitLoading" @table-body-scroll="waitGetMoreList"
                  :searchQuery="waitSearchQuery" @search="waitGetInitList" @filter-change="waitFilterInitList"
                  :height="tableHeight" @cell-click="cellClick">
          <ad-table-column label="序号" type="index" ctype="index" fixed/>
          <ad-table-column label="订单号" fixed="left" prop="orderSubNo" href="/order/detail" id="orderId" ctype="urgent"
                           searchable/>
          <!--            <template slot-scope="{row}">-->
          <!--              <a class="el-link&#45;&#45;inner" :href="'/order/detail?id='+row.orderId" target="_blank">{{row.orderSubNo}}</a>-->
          <!--              <span v-if="row.hasOnlinePay == 1" class="icon-urgent" style="background: green; color: white">线</span>-->
          <!--              <span v-if="row.hasTransferVoucher == 1" class="icon-urgent">凭</span>-->
          <!--            </template>-->
          <!--          </ad-table-column>-->
<!--          <ad-table-column label="类型" prop="orderSubNo" width="50">-->
<!--            <template slot-scope="{row}">-->
<!--              <span v-if="row.hasOnlinePay == 1" class="icon-urgent" style="background: green; color: white">线</span>-->
<!--              <span v-else-if="row.hasTransferVoucher == 1" class="icon-urgent">凭</span>-->
<!--              <span v-else>-</span>-->
<!--            </template>-->
<!--          </ad-table-column>-->
          <ad-table-column label="制单人" prop="createUserName" w="3c2f" searchable sortable/>
          <ad-table-column label="制单时间" prop="createTime" width="130" ctype="datetime" sortable/>
          <ad-table-column label="出发地" prop="startCode" queryPro="startName" ctype="city" w="3c2f" searchable/>
          <ad-table-column label="目的地" prop="destinationCode" queryPro="destinationName" ctype="city" w="3c2f"
                           searchable/>
          <ad-table-column label="车辆名称" prop="carName" w="4c2f" searchable/>
          <ad-table-column label="车架号" prop="vin" ctype="vin-2f" searchable/>
          <ad-table-column label="渠道" prop="channel" w="3c2f"/>
          <ad-table-column label="付款方式" prop="paymentType" w="3c2f" dictName="payment_type" filterable/>
          <ad-table-column label="总运费" prop="totalFee" w="3c2f" sortable/>
          <ad-table-column label="已收合计" prop="totalCollectionHas" w="3c2f" sortable/>
          <ad-table-column label="未收合计" prop="totalCollectionUn" w="3c2f" sortable>
            <template slot-scope="{row}"><span class="un-red">{{row.totalCollectionUn}}</span></template>
          </ad-table-column>
          <u-table-column label="现付" align="center">
            <u-table-column
                prop="spotHas"
                sortable
                label="已收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.spotHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.spotHas == null ? '－' : row.spotHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.spotSettlementName}}</div>
                    <div>联系方式：{{row.spotSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column
                prop="spotUn"
                sortable
                label="未收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span :class="{'un-red': row.spotUn && Number(row.spotUn) != 0}"
                    :style="Number(row.spotUn) != 0 && !!row.spotSettlementName ? 'cursor:pointer' : 'cursor:default'">
                {{row.spotUn == null ? '－' : row.spotUn}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.spotSettlementName}}</div>
                    <div>联系方式：{{row.spotSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <u-table-column label="到付" align="center">
            <u-table-column
                prop="deliveryHas"
                sortable
                label="已收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.deliveryHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.deliveryHas == null ? '－' : row.deliveryHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.deliverySettlementName}}</div>
                    <div>联系方式：{{row.deliverySettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column
                prop="deliveryUn"
                sortable
                label="未收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span :class="{'un-red': row.deliveryUn && Number(row.deliveryUn) != 0}"
                    :style="Number(row.deliveryUn) != 0 && !!row.deliverySettlementName ? 'cursor:pointer' : 'cursor:default'">
                {{row.deliveryUn == null ? '－' : row.deliveryUn}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.deliverySettlementName}}</div>
                    <div>联系方式：{{row.deliverySettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <u-table-column label="欠付" align="center">
            <u-table-column
                prop="backHas"
                sortable
                label="已收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.backHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.backHas == null ? '－' : row.backHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.backSettlementName}}</div>
                    <div>联系方式：{{row.backSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column
                prop="backUn"
                sortable
                label="未收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span :class="{'un-red': row.backUn && Number(row.backUn != 0)}"
                    :style="Number(row.backUn) != 0 && !!row.backSettlementName ? 'cursor:pointer' : 'cursor:default'">
                {{row.backUn == null ? '－' : row.backUn}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.backSettlementName}}</div>
                    <div>联系方式：{{row.backSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <u-table-column label="月付" align="center">
            <u-table-column
                prop="slotHas"
                sortable
                label="已收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :style="Number(row.slotHas) != 0 ? 'cursor:default' : 'cursor:default'">
                {{row.slotHas == null ? '－' : row.slotHas}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.slotSettlementName}}</div>
                    <div>联系方式：{{row.slotSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
            <u-table-column
                prop="slotUn"
                sortable
                label="未收"
                width="100">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" placement="right-start">
              <span
                  :class="{'un-red': row.slotUn && Number(row.slotUn) != 0}"
                  :style="row.slotUn != 0 && !!row.slotSettlementName ? 'cursor:pointer' : 'cursor:default'">
                {{row.slotUn == null ? '－' : row.slotUn}}
              </span>
                  <div slot="content" class="fee-tips">
                    <div>结算人：{{row.slotSettlementName}}</div>
                    <div>联系方式：{{row.slotSettlementPhone}}</div>
                  </div>
                </el-tooltip>
              </template>
            </u-table-column>
          </u-table-column>
          <ad-table-column label="订单状态" prop="orderStatus" w="3c2f" dictName="order_status" filterable/>
          <ad-table-column label="公司名" prop="companyName" w="3c2f" searchable/>
          <ad-table-column label="客户" prop="linkmanName" w="3c2f" searchable/>
          <ad-table-column label="联系电话" prop="linkmanPhone" ctype="phone-2f" searchable/>
          <ad-table-column label="收货人" prop="consigneeName" w="3c2f" searchable/>
          <ad-table-column label="联系电话" prop="consigneePhone" ctype="phone-2f" searchable/>
          <ad-table-column label="订单备注" prop="orderRemark" ctype="remark"/>
        </ad-table>
      </div>
      <div id="bottom" class="bottom" style="min-height: 290px">
        <div class="title-bar" v-if="showBottom"
             style="height:36px;"></div>
        <div v-if="showBottom"
             style="text-align: center;margin: 40px auto;font-size: 14px;color:rgba(96,98,102,0.5);">
          <div style="height:44px;">
            <img :src="noData"/>
          </div>
          暂无内容
        </div>
        <div v-else>
          <div class="content">
            <div class="middle" style="flex-shrink: 0;display: inline-block">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>结算记录</h3>
              </div>
              <ad-table ref="plTable" id="editTable" class="editTable" @cell-click="cellClickBottom"
                        :data="deliverTableData" u-table
                        :height="bottomTabHeight">
                <!--                <ad-table-column label="序号" type="index" ctype="index" width="50"/>-->
                <ad-table-column operation width="50" :operates="operates"/>
                <ad-table-column label="操作人" prop="createUser" width="120"/>
                <ad-table-column label="操作时间" prop="createTime" width="130" ctype="datetime"/>
                <ad-table-column label="结算时间" prop="settlementTime" width="130" ctype="datetime"/>
                <ad-table-column label="实收" prop="settlementFee" width="80"/>
                <ad-table-column label="渠道" prop="channel" width="120" dictName="finance_channel"/>
                <ad-table-column label="收款类型" prop="type" dictName="finance_type" width="120"/>
              </ad-table>
            </div>
            <div class="right" :style="{'height':rightHeight,'position': 'relative'}">
              <div class="form-wrapper driver" style="width:100%;">
                <h3>结算详情</h3>
              </div>
              <div class="op" style="position: absolute;top:3px;right:5px;">
                <el-button v-if="!isEditDraw" :disabled="isRightEdit" size="mini" type="primary" plain
                           @click="editDelivery">修改
                </el-button>
                <el-button v-else size="mini" type="primary" plain @click="deliverSave()">
                  保存
                </el-button>
                <el-button v-show="isEditDraw" size="mini" type="primary" plain @click="isEditDraw=false">
                  取消
                </el-button>
              </div>
              <div id="span8" class="scroll-y"
                   :style="{'height':leftHeight,'overflow-x':'hidden','overflow-y':'auto'}">
                <el-descriptions :column="2" border size="mini" style="overflow: auto;">
                  <el-descriptions-item label="操作时间">
                    <value :model="data" prop="createTime" style="width: 200px;max-width:200px;display: inline-block;"
                           type="datetime"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="操作人" class="tabW">
                    <value :model="data" prop="createUser" style="display: inline-block;"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算人">
                    <value :model="data" prop="settlementUser"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算电话">
                    <value :model="data" prop="settlementPhone"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="收款类型">
                    <value :model="data" prop="type" dictName="finance_type"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="结算时间">
                    <el-date-picker
                        v-if="isEditDraw"
                        v-model="data.settlementTime"
                        type="datetime"
                        size="mini"
                        style="width: 160px;margin: -5px 0;"
                        value-format="timestamp" format="yyyy-MM-dd HH:mm"
                        placeholder="选择时间">
                    </el-date-picker>
                    <value v-else :model="data" prop="settlementTime" type="datetime"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="实收金额">
                    <el-input-number :controls="false" v-if="isEditDraw" size="mini" maxLength="6"
                                     v-model="data.settlementFee"
                                     style="width:100px;margin: -5px 0;"/>
                    <value v-else :model="data" prop="settlementFee"/>
                  </el-descriptions-item>
                  <el-descriptions-item label="渠道">
                    <ad-status-select style="margin: -5px 0;width: 160px" size="mini" v-if="isEditDraw"
                                      v-model="data.channel"
                                      :dict="dict.finance_channel"/>
                    <value v-else :model="data" prop="channel" dictName="finance_channel"/>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="data.origin!=2" label="付款凭证" :span="2">

                    <div v-show="data.imgList.length==0 && !isEditDraw" class="noImg">
                      暂无图片
                    </div>
                    <div v-show="data.imgList.length>0" style="line-height: 16px">
                      <el-image v-if="!isEditDraw" v-for="url in data.imgList" :key="url" :src="url"
                                style="width: 90px; height: 58px;margin-right: 10px;"
                                :preview-src-list="data.imgList"></el-image>
                    </div>
                    <ad-upload v-show="isEditDraw" ref="adimg" multiple v-model="data.imgList"
                               style="line-height: 16px"/>

                  </el-descriptions-item>
                  <el-descriptions-item label="备注" :span="2">
                    <value :model="data" prop="remark"/>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="data.origin==2" label="支付时间">
                    <value :model="data.onlinePayData" prop="finishTime" type="datetime"/>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="data.origin==2" label="交易流水号">
                    <value :model="data.onlinePayData" prop="tradeNo" :title="data.onlinePayData.tradeNo"/>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="data.origin==2" label="支付方式">
                    <value :model="data.onlinePayData" prop="payway" dictName="online_pay_way"/>
                  </el-descriptions-item>
                  <el-descriptions-item v-if="data.origin==2" label="商户流水号">
                    <value :model="data.onlinePayData" prop="sn"/>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div v-if="showIcon">
                <div v-if="data.origin==1" class="bg bg1"></div>
                <div v-if="data.origin==2" class="bg bg2"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import AdSuggestion from '@/components/AdSuggestion'
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import adTable from '@/mixins/adTable'
  import Value from '@/components/AdValue'
  import api, {get as waitApiGetList} from '@/api/finance/receivable/wait';
  import AdUpload from '@/components/AdUpload'
  import noData from '@/assets/404_images/nodata.png';
  import SettlerManage from '@/components/SettlerManage';
  import DriverManage from '@/components/DriverManage'
  import AdStatusSelect from '@/components/AdStatusSelect'
  import AdStatusSelectNoclear from '@/components/AdStatusSelect/noClear'
  import AdDatetimeRange from '@/components/AdDateTimeRange'
  import dateRange from '@/utils/dateRange'
  import {
    getCompanyList as getSuggestCompanyList
  } from '@/api/suggestion'
  import {parseStatus} from '@/utils/code'
  import {download} from '@/api/data'
  import {downloadFile} from '@/utils/index'

  export default {
    name: 'finance-received',
    components: {
      AdTable,
      AdTableColumn,
      AdSuggestion,
      Value,
      AdUpload,
      AdStatusSelect,
      AdStatusSelectNoclear,
      AdDatetimeRange,
      SettlerManage,
      DriverManage
    },
    dicts: ["order_status", "finance_channel", "payment_type", "online_pay_way", "finance_type"],
    mixins: [adTable([
      {name: 'wait', pk: 'code'},
    ])],
    data() {
      return {
        noData,
        showBottom: true,
        rightHeight: 'calc(36vh - 0px)',
        leftHeight: 'calc(36vh - 36px)',
        isEditDraw: false,
        isRightEdit: true,
        showIcon: false,
        deliverForm: {
          channel: null,
          deliverySettlementName: null,
          deliverySettlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: null,
          type: null,
          remark: null,
          orderId: null,
          imgList: [], //交付凭证图
        },
        searchQuery: {
          beginSearchTime: dateRange.getCurrentDay()[0].getTime(),
          endSearchTime: dateRange.getCurrentDay()[1].getTime(),
          collectionStatus: 2
        },
        tableHeight: 440,
        bottomTabHeight: 300,
        deliverTableData: [],
        data: {},
        operates: {
          list: [
            {
              label: '撤销',
              type: 'primary',
              icon: '',
              disabled: (index, row) => {
                if(row.origin==1||row.origin==2){
                  return true
                }else{
                  return false;
                }
              },
              method: (index, row) => {
                this.repeal(row, index);
              }
            }
          ]
        },
      }
    },
    created() {
      let self = this;
      self.waitGetInitList()
      setTimeout(function () {
        self.tableHeight = document.documentElement.clientHeight - document.getElementById('bottom').offsetHeight - 140;
        self.bottomTabHeight = document.getElementById('bottom').offsetHeight - 35;
      })

      if (this.detectZoom() == 100) {
        this.rightHeight = 'calc(36vh - 0px)'
        this.leftHeight = 'calc(36vh - 36px)'
      }
      if (this.detectZoom() == 125) {
        this.rightHeight = 'calc(36vh + 18px)'
        this.leftHeight = 'calc(36vh - 16px)'
      }
    },
    methods: {
      waitApiGetList, parseStatus, getSuggestCompanyList,
      //导出
      exportExcel() {
        let self = this;
        download(`api/finance/collection/download`, self.searchQuery).then(res => {
          downloadFile(res.data, res.headers.downloadFileName, 'xlsx')
        })
      },
      detectZoom: function () {
        let ratio = 0,
          screen = window.screen,
          ua = navigator.userAgent.toLowerCase();

        if (window.devicePixelRatio !== undefined) {
          ratio = window.devicePixelRatio;
        } else if (~ua.indexOf('msie')) {
          if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
          }
        } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
          ratio = window.outerWidth / window.innerWidth;
        }

        if (ratio) {
          ratio = Math.round(ratio * 100);
        }
        return ratio;
      },
      search(times) {
        this.searchQuery.beginSearchTime = times.beginSearchTime
        this.searchQuery.endSearchTime = times.endSearchTime
        this.waitGetInitList()
      },
      //查询
      queryList: function () {
        let self = this;
        self.deliverTableData = [];
        self.showBottom = true;
        self.waitGetInitList()
      },
      cellClick(row, column, event) {
        let self = this;
        self.showBottom = true;
        self.isEditDraw = false;
        self.isRightEdit = true;
        self.showIcon = false;
        self.data = {
          createUser: null,
          createTime: null,
          origin: null,
          settlementFee: undefined,
          settlementPhone: null,
          settlementTime: null,
          settlementUser: null,
          type: null,
          channel: null,
          imgList: []
        };
        self.deliverForm = {
          channel: null,
          deliverySettlementName: null,
          deliverySettlementPhone: null,
          uncollected: null,
          settlementFee: undefined,
          settlementTime: null,
          type: null,
          remark: null,
          orderId: row.orderId,
          imgList: [], //交付凭证图
        };
        api.gegSettlementRecord({orderId: row.orderId, cpType: 1}).then(res => {
          self.deliverTableData = res.data
          if (res.data.length > 0) {
            self.showBottom = false;
            self.getSettlementDetails(self.deliverTableData[0])
            setTimeout(function () {
              // self.deliverTableData.forEach((d, i) => {
              //   if (i == 0) {
              self.$refs.plTable.$refs.table.setCurrentRow(self.deliverTableData[0]);
              //   }
              // })
            }, 200)
          }
        });
      },
      cellClickBottom(row, column, event) {
        let self = this;
        self.getSettlementDetails(row)
      },
      //查询结算详情
      getSettlementDetails: function (row) {
        let self = this;
        let images = [];
        if (row.origin == 0) {
          self.isRightEdit = false;
        } else {
          self.isRightEdit = true;
        }
        if (row.origin == 1 || row.origin == 2) {
          self.showIcon = true;
        }
        self.data = {...row};
        setTimeout(function () {
          if (self.data.imgList.length > 0) {
            self.data.imgList.forEach((d, i) => {
              images.push({
                name: d,
                url: d
              })
            })
            self.$refs.adimg.images = [];
            self.$refs.adimg.images = images;
          }
        })
      },
      //修改
      editDelivery: function () {
        let self = this;
        self.isEditDraw = true;
      },
      //撤销
      repeal(row, index) {
        let self = this;
        self.$confirm('是否确定撤销?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.revoke(row.id).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '撤销',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              self.queryList();
            } else {
              self.$notify({
                title: '撤销',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        }).catch(() => {
        });
      },
      //修改结算保存
      deliverSave: function () {
        let self = this;
        console.log(self.data)
        self.$confirm('是否确定保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.settlementSave(self.data).then(res => {
            if (res.code == 0) {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'success'
              });
              self.queryList();
            } else {
              self.$notify({
                title: '保存',
                message: res.msg,
                position: 'bottom-right',
                type: 'error'
              });
            }
          })
        }).catch(() => {
        });

      },
    }
  }
</script>

<style lang="scss" scoped>
  .page-table {
    display: flex;
    flex: 1;
    flex-direction: column;

    .box-style {
      display: flex;
      flex: 1;
      border: 1px solid #e3e3e3;
      flex-direction: column;
    }

    .top {
      display: flex;
      flex: 1;
      border-bottom: 1px solid #4da7fa;
      flex-direction: column;

      &:after {
        content: '';
        display: block;
        height: 4px;
        background: #4da7fa;
        opacity: 0.2;
      }

      .table-wrapper {
        flex: 1;
      }

      .table {
        flex: 1;
      }
    }

    .bottom {
      display: flex;
      height: 36vh;
      flex-direction: column;

      .title-bar {
        display: flex;
        line-height: 36px;
        background: #f5f5f5;
        border-bottom: 1px solid #e3e3e3;
        padding-left: 10px;
        flex-shrink: 0;

        .op {
          margin-left: auto;
          margin-right: 12px;
        }
      }

      .content {
        display: flex;
        flex: 1;
        overflow: hidden;

        .left {
          display: flex;

          &:after {
            content: '';
            display: block;
            width: 3px;
            background: #4da7fa;
            opacity: 0.2;
          }
        }

        .middle {
          display: flex;
        }

        .right {
          flex: 1;
          overflow: hidden;

          .table-wrapper {
            height: 100%;
          }
        }

        .form-wrapper {
          display: flex;
          flex: 1;
          flex-direction: column;
          width: 18vw;

          h3 {
            height: 35px;
            box-sizing: border-box;
          }

          .form-content {
            padding: 10px 10px 0 10px;
            box-sizing: border-box;
            overflow-y: auto;

            .el-form-item {
              margin-bottom: 10px;
            }
          }
        }
      }
    }

    .bottom {
      & > .title-bar {
        padding-left: 16px;
        border-bottom: 1px solid #bdd0e3;
        background: #f5f5f5;
        align-items: center;
      }

      h2 {
        font-size: 12px;
      }

      h3 {
        padding-left: 10px;
        border-bottom: 1px solid #e3e3e3;
        background: #f5f5f5;
        line-height: 30px;
        font-size: 12px;
      }

      //.left h3 { border-right: 1px solid #e3e3e3; }
      //.middle h3 { border-left: 1px solid #e3e3e3; }
      .right {
        border-left: 1px solid #e3e3e3;
      }
    }
  }
</style>